<omv-intuition-page-header class="omv-sticky omv-z-10"
                           [showLoadingMessage]="false">
</omv-intuition-page-header>
<div *ngIf="config.hints"
     class="omv-display-flex omv-flex-column">
  <omv-alert-panel *ngFor="let hint of config.hints"
                   class="omv-flex-1 omv-m omv-mb-z"
                   [type]="hint.type"
                   [hasTitle]="false"
                   [hasMargin]="false"
                   [dismissible]="hint.dismissible"
                   [stateId]="hint.stateId">
    <span [innerHtml]="hint.text | transloco | template:pageContext | nl2br | sanitizeHtml"></span>
  </omv-alert-panel>
</div>
<mat-card>
  <ng-container *ngTemplateOutlet="renderCardHeader"></ng-container>
  <mat-card-content>
    <omv-datatable #table
                   [ngClass]="{'has-card-header': config.title || config.subTitle }"
                   [stateId]="config.stateId"
                   [rowId]="config.rowId"
                   [data]="config.store.data"
                   [autoLoad]="config.autoLoad"
                   [autoReload]="config.autoReload"
                   [count]="count"
                   [columns]="config.columns"
                   [columnMode]="config.columnMode"
                   [hasActionBar]="config.hasActionBar"
                   [hasStickyActionBar]="true"
                   [ownerContainer]="'#omv-workbench-router-outlet'"
                   [hasHeader]="config.hasHeader"
                   [hasFooter]="config.hasFooter"
                   [hasSearchField]="config.hasSearchField"
                   [limit]="config.limit"
                   [selectionType]="config.selectionType"
                   (selectionChangeEvent)="onSelectionChange($event)"
                   [updateSelectionOnReload]="config.updateSelectionOnReload"
                   (loadDataEvent)="onLoadDataEvent($event)"
                   [remoteSorting]="config.remoteSorting"
                   [remotePaging]="config.remotePaging"
                   [remoteSearching]="config.remoteSearching"
                   [sorters]="config.sorters"
                   [sortType]="config.sortType">
      <omv-datatable-actions [actions]="config.actions"
                             [selection]="selection"
                             [table]="table">
      </omv-datatable-actions>
    </omv-datatable>
  </mat-card-content>
  <mat-card-actions *ngIf="config.buttons.length"
                    class="omv-display-flex omv-flex-row"
                    [ngClass]="{'omv-justify-content-start': config.buttonAlign === 'start', 'omv-justify-content-center': config.buttonAlign === 'center', 'omv-justify-content-end': config.buttonAlign === 'end'}">
    <ng-container *ngFor="let button of config.buttons">
      <omv-submit-button *ngIf="button.template === 'submit'"
                         [disabled]="button.disabled"
                         (buttonClick)="onButtonClick(button)">
        {{ button.text | transloco | template:pageContext }}
      </omv-submit-button>
      <button *ngIf="button.template !== 'submit'"
              mat-flat-button
              [class]="button.class"
              [disabled]="button.disabled"
              (click)="onButtonClick(button)">
        {{ button.text | transloco | template:pageContext }}
      </button>
    </ng-container>
  </mat-card-actions>
</mat-card>

<ng-template #renderCardHeader>
  <ng-container *ngIf="config.title || config.subTitle">
    <ng-container *ngIf="config.icon">
      <mat-card-header>
        <mat-icon mat-card-avatar
                  svgIcon="{{ config.icon }}">
        </mat-icon>
        <mat-card-title *ngIf="config.title">
          {{ config.title | transloco | template:pageContext }}
        </mat-card-title>
        <mat-card-subtitle *ngIf="config.subTitle">
          {{ config.subTitle | transloco | template:pageContext }}
        </mat-card-subtitle>
      </mat-card-header>
    </ng-container>
    <ng-container *ngIf="!config.icon">
      <mat-card-title-group>
        <mat-card-title *ngIf="config.title">
          {{ config.title | transloco | template:pageContext }}
        </mat-card-title>
        <mat-card-subtitle *ngIf="config.subTitle">
          {{ config.subTitle | transloco | template:pageContext }}
        </mat-card-subtitle>
      </mat-card-title-group>
    </ng-container>
  </ng-container>
</ng-template>
